import {useState} from "react";
import {Input, message, Modal, Pagination, Button} from 'antd'
import './detailcard.scss'

const {TextArea} = Input;

//
// ------ ------ ------ ------ ------ 发表评论 ------ ------ ------ ------ ------
//
function ArticleReply(props: any) {
  const text = props.id ? '回复' : '评论' // 如果传了id属性就是删除回复，如果没传默认就是删除评论

  const [replyContent, setReplyContent] = useState('')

  function changeInput(e: any) {
    setReplyContent(e.target.value)
  }

  // 发表评论/回复
  function submit(e: any) {
    e.stopPropagation()
    if (replyContent.length < 6) {
      message.error(`${props.id ? '回复' : '评论'}不能少于6个字！`)
      return;
    }
    console.log(`[发起${text}请求]`);
    /*axios({
      url: [postURL, api.post.createdReply].join(''),
      method: 'post',
      params: {token: wls.XB_token},
      data: QueryString.stringify({
        id: props.id ? props.id : wls.XB_post_id_now,
        content: replyContent
      })
    }).then(res => {
      if (res.data.code !== 'SUCCESS') {
        message.error(res.data.message)
        console.log(`  ${text}失败: `, res.data.message);
        return;
      }
      console.log(`  ${text}成功`);
      setReplyContent('')
      props.onSuccess ? props.onSuccess() : console.log()
      message.success({
        content: `${text}成功！`,
        duration: 0.3,
        onClose: () => {
          window.location.reload()
        }
      })
    }).catch(err => {
      message.error(`${text}失败，请检查网络！`)
      console.log(`  发起${text}请求失败: `, err);
    })*/
  }

  return (
    <div className={'com-article-reply ' + (props.className ? props.className : '')}>
      {
        props.id ? '' :
          <div className='com-article-reply_header'>
            看帖是喜欢，评论才是真爱：
          </div>
      }

      <div className='com-article-reply_textarea'>
        <TextArea
          showCount
          maxLength={1000}
          autoSize={{
            minRows: 4,
            maxRows: 15
          }}
          value={replyContent}
          placeholder='请开始你的表演...'
          onChange={e => {
            changeInput(e)
          }}
          autoFocus={props.autoFocus ? props.autoFocus : false}
        />
      </div>

      <div className='com-article-reply_handle'>
        <button className='button' onClick={(e) => {
          submit(e)
        }}>回 复
        </button>
      </div>
    </div>
  )
}

export default ArticleReply
